<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/view/common/tag.jsp" %>
<head>
    <meta charset="UTF-8"/>
    <title>首页-聊天机器人展览系统</title>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta http-equiv="Access-Control-Allow-Origin" content="*"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="format-detection" content="telephone=no"/>
    <link rel="stylesheet" href="${baseurl}/lib/layui/css/layui.css">
    <link rel="stylesheet" href="${baseurl}/lib/portal/css/portal.css">
    <link rel="stylesheet" href="${baseurl}/lib/portal/css/global.css">
</head>
<body>
<jsp:include page="header.jsp">
    <jsp:param name="flag" value="2"></jsp:param>
</jsp:include>
<div class="content layui-container" style="padding-top: 15px;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-panel clear-overflow">
                <div class="layui-col-md4" style="padding: 16px">
                    <img width="300px" src="${galleryInfo.galleryImage}" alt="艺术馆图片"/>
                </div>

                <div class="layui-col-md6">
                    <div class="detail-title">${galleryInfo.galleryName}</div>
                    <div class="detail-title">${galleryInfo.gallerySummary}</div>
                </div>
            </div>
            <div>
                <ul class="jt-list" id="LAY_content">

                </ul>
            </div>
            <div style="text-align: center" id="LAY-page">
            </div>
        </div>
    </div>
</div>

<!--footer-->
<jsp:include page="footer.jsp"></jsp:include>

<script id="LAY_tpl" type="text/html">
    {{# layui.each(d, function(index, item){ }}
    <li class="layui-panel">
        <div class="jt-list-left">
            <a href="${baseurl}/portal/exhibitionInfo/exhibitionDetail?id={{item.id}}">
                <img style="width: 160px;height: 120px;" src="{{item.exhibitionImage}}" alt="贤心">
            </a>
        </div>
        <div class="jt-list-right" style="width: 80%">
            <div class="jt-title">
                <a href="${baseurl}/portal/exhibitionInfo/exhibitionDetail?id={{item.id}}">{{item.exhibitionName}}</a>
            </div>
            <div class="content">
                {{item.exhibitionSummary}}
            </div>
            <div class="info">
                <div>起止时间：{{item.exhibitionStartDate}}-{{item.exhibitionEndDate}}</div>
                <div>可预订人数：{{item.appointAmount}}</div>
            </div>
        </div>
    </li>
    {{# }); }}
    {{# if(d.length === 0){ }}
    暂无展览馆
    {{# } }}
</script>

<script type="text/javascript" src="${baseurl}/lib/layui/layui.js"></script>
<script type="text/javascript" src="${baseurl}/lib/layui_custom/Hlayui.js"></script>
<script>
    layui.use(['layer', 'laytpl', 'form', 'laypage', 'element', 'util', 'layerCustom'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var laytpl = layui.laytpl;
        var form = layui.form;
        var layerCustom = layui.layerCustom;
        var element = layui.element;
        var laypage = layui.laypage;
        var util = layui.util;

        $(function () {
            init();
        })

        // ()();
        function init() {
            $.get(BaseUrl + 'portal/exhibitionInfo/list', {page: 1, limit: 10}, function (res) {
                renderList(res.data);
                var total = res.count;
                pageColumn(total);
            })
        }

        /*列表渲染*/
        var renderList = function (data) {
            var getTpl = document.getElementById("LAY_tpl").innerHTML;
            laytpl(getTpl).render(data, function (html) {
                document.getElementById("LAY_content").innerHTML = html;
            });
        }
        /*分页插件渲染*/
        var pageColumn = function (total) {

            laypage.render({
                elem: 'LAY-page'
                , count: total
                , jump: function (obj, first) {
                    if (!first) {
                        getPage(obj.curr, obj.limit);
                    }
                }
            });
        };

        var getPage = function (page, limit) {
            $.get(BaseUrl + 'portal/exhibitionInfo/list', {page: page, limit: limit}, function (res) {
                renderList(res.data);
            })
        }

        //固定Bar
        util.fixbar({
            bgcolor: '#009688'
        });
    })
</script>
</body>
</html>
